<%-- 
    Document   : gallery-3
    Created on : 24/07/2013, 15:25:11
    Author     : Jean Carlo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>SIMPLE</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
                <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
                <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
        </script>
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

        <!-- prettyPhoto -->
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- JS -->
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/jqueryui.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/tooltip/jquery.tools.min.js"></script>
        <script type="text/javascript" src="js/filterable.pack.js"></script>
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/chirp.js"></script>
        <script type="text/javascript" src="js/jquery.tabs/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- ENDS JS -->

        <!-- Cufon -->
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/fonts/bebas-neue_400.font.js" type="text/javascript"></script>
        <!-- /Cufon -->

        <!-- superfish -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
        <!-- ENDS superfish -->

        <!-- tabs -->
        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <!-- ENDS tabs -->

    </head>


    <body>

        <!-- HEADER -->
        <div id="header">
            <div class="degree">
                <div class="wrapper">
                    <a href="index.jsp"><img src="img/logo.png" alt="Logo" id="logo" /></a>

                    <!-- search -->
                    <div class="top-search">
                        <form  method="get" id="searchform" action="">
                            <div>
                                <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                                <input type="submit" id="searchsubmit" value=" " />
                            </div>
                        </form>
                    </div>
                    <!-- ENDS search -->

                    <!-- navigation -->
                    <div id="nav-holder">
                        <ul id="nav" class="sf-menu">
                            <li><a href="index.jsp">HOME</a>
                                <ul>
                                    <li><a href="index-3d.jsp">3D SLIDESHOW</a></li>
                                </ul>
                            </li>
                            <li><a href="about.jsp">FEATURES</a>
                                <ul>
                                    <li><a href="about.jsp">LAYOUT</a></li>
                                    <li><a href="about-styled.jsp">STYLED</a></li>
                                    <li><a href="about-more.jsp">MORE</a></li>
                                    <li><a href="about-toggle.jsp">TOGGLE BOX</a></li>
                                    <li><a href="about-accordion.jsp">ACCORDION</a></li>
                                    <li><a href="appearance.jsp">APPEARANCE</a></li>
                                </ul>
                            </li>
                            <li><a href="portfolio.jsp">PORTFOLIO</a></li>
                            <li class="current_page_item"><a href="gallery.jsp">GALLERY</a>
                                <ul>
                                    <li><a href="gallery.jsp">FOUR COLS</a></li>
                                    <li><a href="gallery-3.jsp">THREE COLS</a></li>
                                    <li><a href="gallery-2.jsp">TWO COLS</a></li>
                                </ul>
                            </li>
                            <li ><a href="blog.jsp">BLOG</a></li>
                            <li><a href="contact.jsp">CONTACT</a></li>
                            <li><a href="staff.jsp">STAFF</a></li>
                            <li><a href="http://luiszuno.com/blog/downloads/simple-template ">DOWNLOAD</a></li>

                        </ul>
                    </div>
                    <!-- ENDS navigation -->

                </div>
                <!-- ENDS HEADER-wrapper -->
            </div>
        </div>
        <!-- ENDS HEADER -->

        <!-- MAIN -->
        <div id="main">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- content -->
                <div class="content">
                    <!-- title -->
                    <div class="title-holder">
                        <span class="title">GALLERY</span>
                        <span class="subtitle">Pellentesque habitant morbi tristique senectus et netus et malesuada fames .</span>
                    </div>
                    <!-- ENDS title -->


                    <!-- page-content -->
                    <div class="page-content">

                        <!-- filter -->
                        <ul id="portfolio-filter">
                            <li>FILTER </li>
                            <li><a href="#all" class="link-button"><span>ALL</span></a></li>
                            <li><a href="#filter-autumn" class="link-button"><span>AUTUMN</span></a></li>
                            <li><a href="#filter-winter" class="link-button"><span>WINTER</span></a></li>
                            <li><a href="#filter-city" class="link-button"><span>CITY</span></a></li>
                        </ul>
                        <!-- filter -->



                        <!-- Thumbnails -->
                        <ul id="portfolio-list" class="gallery three-cols" >
                            <li class="filter-autumn">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-autumn">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-winter">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-winter">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-city">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-city">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-city">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-city">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                            <li class="filter-city">
                                <a href="img/dummies/dummy-tool-t.jpg" title="The road" rel="prettyPhoto[gallery]">
                                    <span></span>
                                    <img src="img/dummies/gallery-3cols.gif" alt="The Road" title="The Road"/></a>
                                <em>The Road</em>
                            </li>
                        </ul>
                        <!-- ENDS Thumbnails -->

                        <!-- Pagination -->
                        <div class="holder">
                            <ul class='gallery-pager'>
                                <li><a href="#">prev</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li class="last-child"><a href="#">next</a></li>
                            </ul>
                        </div>
                        <!-- ENDS Pagination -->			

                    </div>
                    <!-- ENDS page-content -->


                </div>
                <!-- ENDS content -->

                <!-- twitter -->
                <div class="twitter-reader">
                    <script>Chirp({user:"ansimuz",max:1})</script></div>
            </div>
            <!-- ENDS twitter -->

        </div>
        <!-- ENDS main-wrapper -->


        </div>		
        <!-- ENDS MAIN -->	

        <!-- FOOTER -->
        <div id="footer">
            <div class="degree">
                <!-- wrapper -->
                <div class="wrapper">
                    <!-- social bar -->
                    <div id="social-bar">

                        <ul class="follow-us">
                            <li><span>FOLLOW US</span></li>
                            <li ><a href="#" class="icon-32 twitter-32 social-tooltip" title="Follow our tweets">link</a></li>
                            <li ><a href="#" class="icon-32 vimeo-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 dribbble-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 flickr-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 facebook-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>

                        </ul>
                    </div>
                    <!-- ENDS social bar -->
                    <!-- footer-cols -->
                    <ul class="footer-cols">
                        <li class="col">
                            <h6>CATEGORIES</h6>
                            <ul>
                                <li><a href="#">WEBDESIGN</a></li>
                                <li><a href="#/">WORDPRESS</a></li>
                                <li><a href="#">PHOTO</a></li>
                                <li><a href="#">CODING</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>FREE TEMPLATES &amp; THEMES</h6>
                            <p>Get tons of free high quality templates at <a href="http://templatecreme.com">Template Creme</a>.</p>
                        </li>	
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>		
                    </ul>
                    <!-- ENDS footer-cols -->
                </div>
                <!-- ENDS footer-wrapper -->
            </div>
        </div>
        <!-- ENDS FOOTER -->


        <!-- BOTTOM -->
        <div id="bottom">
            <!-- wrapper -->
            <div class="wrapper">
                SIMPLE THEME by <a href="http://www.luiszuno.com" >luiszuno.com</a>
            </div>
            <!-- ENDS bottom-wrapper -->
        </div>
        <!-- ENDS BOTTOM -->

        <!-- start cufon -->
        <script type="text/javascript"> Cufon.now(); </script>
        <!-- ENDS start cufon -->

    </body>
</html>